<template>
  <div class="interview-select-page">
    <div class="page-container">
      <div class="page-header">
        <h1>模拟面试</h1>
        <p>选择您想要面试的岗位，开始AI模拟面试之旅</p>
      </div>

      <a-row :gutter="[16, 16]" class="position-grid">
        <a-col
          v-for="position in positions"
          :key="position.type"
          :xs="24"
          :sm="12"
          :lg="6"
        >
          <div class="position-card" @click="selectPosition(position.type)">
            <div class="card-icon-wrapper" :style="{ background: position.gradient }">
              <component :is="position.icon" class="card-icon" />
            </div>
            <div class="card-content">
              <h3>{{ position.name }}</h3>
              <p>{{ position.description }}</p>
              <a-button type="primary" block class="start-btn">
                开始面试 →
              </a-button>
            </div>
          </div>
        </a-col>
      </a-row>

      <div class="history-section">
        <div class="section-header">
          <h2>📋 我的面试记录</h2>
        </div>

        <a-table
          :columns="columns"
          :data-source="reportList"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
          class="history-table"
        >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'interviewScore'">
            <a-tag :color="getScoreColor(record.interviewScore)" v-if="record.interviewScore != null">
              {{ record.interviewScore }}分
            </a-tag>
            <a-tag color="green" v-else>正在加班加点为您生成报告哟~</a-tag>
          </template>
          <template v-else-if="column.key === 'createTime'">
            {{ formatTime(record.createTime) }}
          </template>
          <template v-else-if="column.key === 'action'">
            <a-space>
              <a-button type="link" @click="viewReport(record.id)">查看报告</a-button>
              <a-popconfirm
                title="确定要删除这条面试记录吗？"
                ok-text="确定"
                cancel-text="取消"
                @confirm="deleteRecord(record.id)"
              >
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm>
            </a-space>
          </template>
        </template>
        </a-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, h } from 'vue'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  CodeOutlined,
  Html5Outlined,
  BugOutlined,
  DatabaseOutlined,
} from '@ant-design/icons-vue'
import {
  generateInterviewQuestion,
  listInterviewReportVoByPage,
  deleteReport,
} from '@/api/interviewReportController'

const router = useRouter()

// 岗位配置
const positions = [
  {
    type: 'Java开发工程师',
    name: 'Java开发',
    description: '核心技术、框架、并发',
    icon: CodeOutlined,
    color: '#3b82f6',
    gradient: 'linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%)',
  },
  {
    type: 'Web前端开发工程师',
    name: 'Web前端',
    description: 'HTML、CSS、JS、Vue',
    icon: Html5Outlined,
    color: '#8b5cf6',
    gradient: 'linear-gradient(135deg, #8b5cf6 0%, #10b981 100%)',
  },
  {
    type: '测试工程师',
    name: '测试工程',
    description: '自动化、性能测试',
    icon: BugOutlined,
    color: '#10b981',
    gradient: 'linear-gradient(135deg, #10b981 0%, #3b82f6 100%)',
  },
  {
    type: 'PHP工程师',
    name: 'PHP开发',
    description: 'PHP语法、框架、数据库',
    icon: DatabaseOutlined,
    color: '#f59e0b',
    gradient: 'linear-gradient(135deg, #f59e0b 0%, #8b5cf6 100%)',
  },
]

// 表格列配置
const columns = [
  {
    title: '面试岗位',
    dataIndex: 'interviewType',
    key: 'interviewType',
  },
  {
    title: '面试时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '综合评分',
    dataIndex: 'interviewScore',
    key: 'interviewScore',
  },
  {
    title: '操作',
    key: 'action',
  },
]

// 数据
const loading = ref(false)
const reportList = ref<any[]>([])
const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
})

// 选择岗位，开始面试
const selectPosition = (interviewType: string) => {
  // 直接跳转到答题页面，传递岗位信息
  router.push({
    path: '/interview/answer',
    query: {
      interviewType,
    },
  })
}

// 加载面试记录
const loadReports = async () => {
  try {
    loading.value = true
    const res = await listInterviewReportVoByPage({
      pageNum: pagination.value.current,
      pageSize: pagination.value.pageSize,
    })
    if (res.data.code === 0 && res.data.data) {
      reportList.value = res.data.data.records || []
      pagination.value.total = res.data.data.totalRow || 0
    }
  } catch (error) {
    message.error('加载面试记录失败')
    console.error(error)
  } finally {
    loading.value = false
  }
}

// 表格分页变化
const handleTableChange = (pag: any) => {
  pagination.value.current = pag.current
  pagination.value.pageSize = pag.pageSize
  loadReports()
}

// 查看报告
const viewReport = (id: number) => {
  router.push(`/interview/report/${id}`)
}

// 删除记录
const deleteRecord = async (id: number) => {
  try {
    const res = await deleteReport({ id })
    if (res.data.code === 0) {
      message.success('删除成功')
      loadReports()
    } else {
      message.error('删除失败：' + res.data.message)
    }
  } catch (error) {
    message.error('删除失败')
    console.error(error)
  }
}

// 获取分数颜色
const getScoreColor = (score: number) => {
  if (score >= 90) return 'green'
  if (score >= 75) return 'blue'
  if (score >= 60) return 'orange'
  return 'red'
}

// 格式化时间 - 使用createTime而不是interviewTime
const formatTime = (time: string) => {
  if (!time) return '-'
  // 格式化时间显示为 YYYY-MM-DD HH:mm
  const date = new Date(time)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

onMounted(() => {
  loadReports()
})
</script>

<style scoped>
.interview-select-page {
  padding: 24px;
  background:  linear-gradient(180deg, #f8fafc 0%, #f1f5f9 8%, #e2e8f0 20%, #cbd5e1 100%),
    radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(16, 185, 129, 0.08) 0%, transparent 50%);;
  min-height: calc(100vh - 64px);
}

.page-container {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {

  text-align: center;
  padding: 40px 20px;
  margin-bottom: 30px;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #10b981 100%);
    background-clip:text;
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.page-header h1 {
  font-size: 56px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-header p {
  font-size: 18px;
  color:#64748b;
  margin: 0;
}

.position-grid {
  margin-bottom: 40px;
}

.position-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  height: 100%;
}

.position-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.card-icon-wrapper {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.card-icon-wrapper::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.card-icon {
  font-size: 56px;
  color: #fff;
  z-index: 1;
}

.card-content {
  padding: 20px;
}

.card-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

.card-content p {
  font-size: 13px;
  color: #666;
  margin-bottom: 16px;
  line-height: 1.6;
  min-height: 40px;

}

.start-btn {
  border-radius: 8px;
  height: 38px;
  font-weight: 500;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border: none;
}

.start-btn:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #10b981 100%);
  transform: translateX(2px);
}

.history-section {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.section-header {
  margin-bottom: 20px;
}

.section-header h2 {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 0;
}

.history-table {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.ant-table) {
  border-radius: 8px;
}

:deep(.ant-table-thead > tr > th) {
  background: #f5f7fa;
  font-weight: 600;
  color: #333;
}

:deep(.ant-table-tbody > tr:hover > td) {
  background: #f5f7fa;
}

@media (max-width: 768px) {
  .page-header h1 {
    font-size: 32px;
  }

  .page-header p {
    font-size: 16px;
  }

  .card-content h3 {
    font-size: 16px;
  }
}
</style>

